<template>
  <div > 
      <a-card title="基本信息" :bordered="true"  >
          <a-row  class='mt12'>
            <a-col  :lg='6'  :md='12'  :sm='24' >供应商名称：<span  class='color-black'>{{baseform.name}}</span></a-col>
            <a-col  :lg='6'  :md='12'  :sm='24'>地址：<span  class='color-black'>{{baseform.address}}</span></a-col>
            <a-col  :lg='6'  :md='12'  :sm='24'>电话：<span  class='color-black'>{{baseform.phone}}</span></a-col>
            <a-col  :lg='6'  :md='12'  :sm='24'>邮箱：<span  class='color-black'>{{baseform.email}}</span></a-col>
          </a-row>
          <a-row>
              <a-col  :lg='6'  :md='12'  :sm='24'>网址：<span  class='color-black'>{{baseform.website}}</span></a-col>
              <a-col  :lg='6'  :md='12'  :sm='24'>行业：<span  class='color-black'>{{baseform.industry}}</span></a-col>
              <a-col  :lg='6'  :md='12'  :sm='24'>经营范围：<span  class='color-black'>{{baseform.businessScope}}</span></a-col>
              <a-col  :lg='6'  :md='12'  :sm='24'>规模：<span  class='color-black'>{{baseform.entSize}}</span></a-col>
          </a-row>
          <a-row>
              <a-col  :lg='6'  :md='12'  :sm='24'>联系人：<span  class='color-black'>{{baseform.contact}}</span></a-col>
              <a-col  :lg='6'  :md='12'  :sm='24'>联系电话：<span  class='color-black'>{{baseform.mobile}}</span></a-col>
          </a-row>
          <a-row>
              <a-col    :md='11'  :sm='24'>产品说明：<span  class='color-black'>{{baseform.prdDescription}}</span></a-col>
              <a-col    :md='{span:12,offset:1}'   :sm='24'>备注：<span  class='color-black'>{{baseform.remark}}</span></a-col>
          </a-row>
      </a-card>
      <a-card title="账户信息" :bordered="true"  class='mt42'>
          <a-table :columns="columns" :dataSource="bizBankAccounts"   :pagination='false'  :rowKey="record => record.code">
              
              <template v-for="col in ['bankName', 'bankAddress', 'accountName','bankAccount','swift','defaultFlag']" :slot="col" slot-scope="text, record, index">
                <div :key="col">
                  <!-- {{record.index}} 行数怎么确认？-->
                  <template  v-if="record.editable  ">
                    <a-input
                       v-if='col == "bankName"'
                       v-focus
                       style="margin: -5px 0"
                       :value="text"
                       placeholder="姓名"
                       @change="e => handleChangeAccount(e.target.value, col, index)"
                    />
                     <a-input
                      v-else
                      style="margin: -5px 0"
                      :value="text"
                      
                      @change="e => handleChangeAccount(e.target.value, col, index)"
                    />
                  </template>
                  <template v-else>
                    <span  v-if='col=="defaultFlag"'>{{text | commonRadio}}</span>
                    <span  v-else>{{text}}</span>
                </template>
                </div>
              </template>
          </a-table>
      </a-card>
      <a-card title="资质信息" :bordered="true"  class='mt42 mb28'>
          <a-row>
              <a-col  :lg='6'  :md='12'  :sm='24'>资质：
                  <ul class='pr20'>
                    <li  v-for='item in qualificationFile'><span><a-icon type="paper-clip" />{{item.name}}</span><a-icon type="download" class='fr' @click='downloadFile(item.code)'/></li>
                  </ul>
              </a-col>
              <a-col  :lg='6'  :md='12'  :sm='24'>营业执照：
                  <ul class='pr20'>
                    <li  v-for='item in businessLicenseFile'><span><a-icon type="paper-clip" />{{item.name}}</span><span  class='fr  pr20  color-blue  cursor'>下载</span></li>
                  </ul>
              </a-col>
              <a-col  :lg='6'  :md='12'  :sm='24'>纳税登记号：<span  class='color-black'>{{baseform.taxNum}}</span></a-col>
              <a-col  :lg='6'  :md='12'  :sm='24'>法人：<span  class='color-black'>{{baseform.legalPerson}}</span></a-col>
          </a-row>
          <a-row>
              <a-col  :lg='6'  :md='12'  :sm='24'>相关附件：
                  <ul class='pr20'>
                    <li  v-for='item in annexFile'><span><a-icon type="paper-clip" />{{item.name}}</span><span  class='fr  pr20  color-blue cursor'>下载</span></li>
                  </ul>
              </a-col>
          </a-row>
      </a-card> 
      <div class='text-center'>
        <a-button  type='primary' ><router-link to='/supplier'>返回</router-link></a-button>
      </div>
  </div>
</template>

<script>
import  { DetailEnt }  from '@/api/customer/index'
  /*联系人表格 columns*/
const columns = [{
  title: '银行名称',
  dataIndex: 'bankName',
  width: '15%',
  scopedSlots: { customRender: 'bankName' },
}, {
  title: '银行地址',
  dataIndex: 'bankAddress',
  width: '15%',
  scopedSlots: { customRender: 'bankAddress' },
}, {
  title: '账户名称',
  dataIndex: 'accountName',
  width: '15%',
  scopedSlots: { customRender: 'accountName' },
},
 {
  title: '账户',
  dataIndex: 'bankAccount',
  width: '15%',
  scopedSlots: { customRender: 'bankAccount' },
},  {
  title: 'SWIFT',
  dataIndex: 'swift',
  width: '15%',
  scopedSlots: { customRender: 'swift' },
},{
  title: '是否设为默认',
  dataIndex: 'defaultFlag',
  width: '12%', 
  scopedSlots: { customRender: 'defaultFlag' },
}, 
]
export default {
  name: 'supplierDetail',
  data () {
    return {
        code:'',
        /*form  布局*/
        formItemLayout:{
          labelCol: {md:{span:5},lg:{ span: 6 }},  //label 标签布局
          wrapperCol: {xl:{ span : 18},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 
        },
        columns,
        baseform:{},
        bizBankAccounts:[],
        qualificationFile:[],
        businessLicenseFile:[],
        annexFile:[],
    }
  },
  created(){
    this.code = this.$route.query.code ? this.$route.query.code : this.$store.state.entCode
    this.pageInit()
  },
  methods:{
     pageInit(){
         DetailEnt(this.code).then((res)=>{
          if(res.data.flag == true){
            let data = res.data.data
            /******* 请求信息回填处理S*******/
            this.baseform = data
            /*过滤账户表格其他信息*/
            this.bizBankAccounts = data.bizBankAccounts.map(item => {
                return {
                    accountName: item.accountName,
                    bankAccount: item.bankAccount, 
                    bankAddress: item.bankAddress, 
                    bankName: item.bankName, 
                    swift: item.swift, 
                }
            })
            /*过滤已上传文件 ，并为后续上传，存储保持一致设定字段*/
            if(data.qualificationFile.length!=0){
              this.qualificationFile = data.qualificationFile.map(item=>{
              return {
                uid:item.code,//uid ：default 默认类型回填 ；删除 
                code:item.code,//提交表单时 需要取跟上传文件处理后返回同样的code   上传文件后取code
                      name: item.name,
                      status: 'done',  
              }
            })
            }
          if(data.businessLicenseFile.length!=0){
            this.businessLicenseFile = data.businessLicenseFile.map(item=>{
              return {
                uid:item.code,
                code:item.code,
                      name: item.name,
                      status: 'done',
              }
            })
          }
          if(data.annexFile.length!=0){
            this.annexFile = data.annexFile.map(item=>{
              return {
                uid:item.code,
                code:item.code,
                      name: item.name,
                      status: 'done',
              }
            })
          }
          /******* 请求信息回填处理e*******/
          }
        })
     },
     
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-input{width: 200px;}
.ant-row .ant-col-lg-6{margin-bottom: 30px;}
</style>
